<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui-iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.3.1.min.css"/>

</head>

<body>
<style>
    .reg-body {
        background: #f0f0f0;
        width: 100%;
        height: 100%;
        /*position: fixed;*/
    }

    [v-cloak] {
        display: none;
    }

    .perfect {
        background: #fff;
    }

    .perfect_head {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        padding-top: 30px;
        padding-bottom: 30px;

    }

    .perfect_head span {
        width: 20px;
        height: 20px;
        display: block;
        background: #cccccc;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
    }

    .perfect_head_status1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 10px;
    }

    .perfect_head_status1 span {
        margin-right: 10px;
    }

    .perfect_head_status1.active {
        color: rgba(109, 67, 229, 1);
    }

    .perfect_head_status1.active span {
        background: rgba(109, 67, 229, 1);
        color: #fff;
    }

    .touxiang1 {
        width: 160px;
        height: 160px;
        margin: auto;
        margin-bottom: 20px;
    }

    .touxiang1 img {
        width: 160px;
        height: 160px;
    }

    .regperfect {
        background: #fff;
        padding-bottom: 20px;
    }

    .reg-button {
        width: 80%;
        height: 45px;
        background: rgba(109, 67, 229, 1);
        border-radius: 5px;
        margin: 40px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
    }

    .reglist {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /*margin-top: 100px;*/

    }

    .reglist1 {
        height: 45px;
        border-bottom: 1px solid #f6f6f6;
        width: 92%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .reglabel {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .regright {
        display: flex;
        justify-content: flex-end;
        align-items: center;

    }

    .regright span {
        width: 35px;
        height: 25px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 2px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        color: #333333;
    }

    .regright span.active {
        background: rgba(109, 67, 229, 1);
        color: #fff;

    }

    .regright1 {
        color: #C7C7C8;
    }

    .touxiang1 .icon-plus {
        font-size: 50px;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #eeeeee;
    }

    .shangchuan {
        width: 160px;
        height: 160px;
        border: 1px solid #eeeeee;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .shangchuan p {
        margin-top: 20px;
    }

    .reglist1 input {
        height: 45px;
        border: none;
        line-height: 45px;
        margin-bottom: 0;
    }

    .zwjs {
        display: flex;
        width: 100%;
        background: #fff;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }

    .zwjs_title {
        width: 92%;
        height: 45px;
        border-bottom: 1px solid #f8f8f8;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        font-size: 16px;
    }

    .zwjs_desc {
        width: 92%;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .zwjs_desc input {
        border: none;
        padding: 0;
        font-size: 14px;
    }

    .zwjs_desc2 {
        display: flex;
        width: 92%;
        justify-content: flex-start;
        align-items: center;
        min-height: 50px;


    }

    .zwjs_desc2 span {
        background: rgba(248, 248, 248, 1);
        padding: 5px 20px;
        font-size: 14px;
        color: #999999;
        margin-right: 10px;
        border-radius: 3px;
    }

    .zwjs_desc3 {
        display: flex;
        width: 100%;
        margin-left: 10px;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
    }

    .zwjs_desc3 span {
        font-size: 14px;
        color: #999999;
    }

    .zwjs_desc3 span.active {
        color: #6D43E5;
    }

    #box {
        background: #ffffff;
        height: 106px;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: -106px;
        -webkit-transform: translate3d(0px, -106px, 0px);
        -moz-transform: translate3d(0px, -106px, 0px);
        transform: translate3d(0px, -106px, 0px);
        transition: all 0.3s;
        visibility: hidden;
    }

    #box a {
        display: block;
        width: 100%;
        text-align: center;
        height: 40px;
        background: #fff;
        color: #333;
        line-height: 40px;
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        position: relative;
        margin-bottom: 6px;
    }

    .btn {
        margin-top: 0.1rem;
        margin-bottom: 2rem;
        text-align: center
    }

    .status4, .status5 {
        /*min-height: 1000px;*/
        padding-top: 20px;
    }

    .btn button {
        width: 90%;
        outline: none;
        border: none;
        background: #009bdb;
        color: #fff;
        height: 40px;
        display: inline-block;
        border-radius: 0.4rem;
        font-size: 16px;
    }

    .mui-poppicker-header .mui-btn {
        padding: 5px 10px !important;
        line-height: 30px !important;
        height: 30px !important;
        padding-top: 0 !important;
    }

    .zwjs_desc input::-webkit-input-placeholder {
        color: #c7c7c8;
    }

    .zwjs_desc input::-moz-placeholder {
        color: #c7c7c8;
    }

    .zwjs_desc input::-ms-input-placeholder {
        color: #c7c7c8;
    }

    .flexstart {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
</style>
<div id="app">
    <div id="wraps" class="flex-wrap bgn flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <span>完善资料({{status+1}}/3)</span>
                </li>
            </ul>
        </header>
        <div class="reg-body">
            <!--基本资料-->
            <div class="regperfect fixed-header">
                <!--<div class="perfect">-->
                <!--<div class="perfect_head" :class="{'active':status==0||status==1||status==2}">-->
                <!--<div class="perfect_head_status1" :class="{active:status==0||status==1||status==2}">-->
                <!--<span>1</span>基本资料-->
                <!--</div>-->
                <!--<div class="perfect_head_status1" :class="{active:status==1||status==2}">-->
                <!--<span>2</span>实名认证-->
                <!--</div>-->
                <!--<div class="perfect_head_status1" :class="{active:status==2}">-->
                <!--<span>3</span>完成-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="status4" v-if="status!=2">
                    <div class="ziliao" v-if="status==0">
                        <div class="touxiang1" @click="upimg">
                            <div class="shangchuan" v-if="img==''">
                                <i class="icon iconfont icon-plus"></i>
                                <p>上传头像</p>
                            </div>
                            <img :src="img" alt="" v-else>
                        </div>
                        <div class="reglist">
                            <div class="reglist1 flexstart">
                                <div class="reglabel">
                                    昵称
                                </div>
                                <div class="regright">
                                    <input placeholder="请输入昵称" type="text" v-model="nickname">
                                </div>
                            </div>
                            <div class="reglist1">
                                <div class="reglabel">
                                    性别
                                </div>
                                <div class="regright">
                                    <span :class="{active:sex==1}" @click="checksex(1)">男</span>
                                    <span :class="{active:sex==0}" @click="checksex(0)">女</span>
                                </div>
                            </div>
                            <div class="reglist1 flexstart">
                                <div class="reglabel">
                                    年龄
                                </div>
                                <div class="regright">
                                    <input placeholder="请输入年龄" type="text" v-model="age">
                                </div>
                            </div>
                            <!--<div class="reglist1" @click="getdate">-->
                            <!--<div class="reglabel">-->
                            <!--生日-->
                            <!--</div>-->
                            <!--<div class="regright1">-->
                            <!--{{birthday}}<i class="icon iconfont icon-down"></i>-->
                            <!--</div>-->
                            <!--</div>-->
                            <div class="reglist1" @click="getaddress">
                                <div class="reglabel">
                                    籍贯
                                </div>
                                <div class="regright1">
                                    {{province}}{{city}}{{country}} <i class="icon iconfont icon-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shiming" v-if="status==1">
                        <div class="touxiang1" @click="upimg">
                            <div class="shangchuan" v-if="imgc==''">
                                <i class="icon iconfont icon-plus"></i>
                                <p>上传真实照</p>
                            </div>

                            <img :src="imgc" alt="" v-else>
                        </div>
                        <div class="reglist">
                            <div class="reglist1">
                                <input v-model="username" placeholder="请输入真实姓名" type="text">
                            </div>
                            <div class="reglist1">
                                <input v-model="shenfenzheng" placeholder="请输入身份证号码" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="reg-button" @click="nextstep">
                        下一步
                    </div>
                </div>
                <div class="status5" v-if="status==2">
                    <div class="zwjs mt10">
                        <div class="zwjs_title">
                            约会目的
                        </div>
                        <div class="zwjs_desc">
                            <input v-model="bio" type="text" placeholder="仁慈的主，愿你的过降临">
                        </div>
                    </div>
                    <!--<div class="zwjs mt10">-->
                    <!--<div class="zwjs_title">-->
                    <!--自我评分-->
                    <!--</div>-->
                    <!--<div class="zwjs_desc3">-->
                    <!--<span v-for="(item,index) in pingfenlist" :class="score==item?'active':''"-->
                    <!--@click="checkscore(item)">-->
                    <!--<i class="icon iconfont" :class="score==item?'icon-radio':'icon-radio-o'"></i>{{item}}-->
                    <!--</span>-->
                    <!--</div>-->
                    <!--</div>-->
                    <div class="reg-button" @click="nextstep">
                        完成
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="box">
        <a>操 作</a>
        <div class="btn" @click="save">
            <button>
                截取图片
            </button>
        </div>
    </div>
</div>
</body>
<script src="../../script/mui.min.js"></script>
<script src="../../script/mui.picker.js"></script>
<script src="../../script/mui.poppicker.js"></script>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function () {
        var main = new Vue({
            el: "#app",
            data: {
                title: '完善资料',
                tel: '',
                status: api.pageParam.id,
                // status: 0,
                sex: 0,
                birthday: '1991-01-01',
                address: '',
                province: '北京市',
                city: '北京市',
                country: '东城区',
                img: '',
                imgc: '',
                nickname: '',
                shenfenzheng: '',
                pingfenlist: [
                    {
                        name: '一般',
                        pingfen: 0
                    }, {
                        name: '及格',
                        pingfen: 60
                    }, {
                        name: '良好',
                        pingfen: 80
                    }, {
                        name: '优秀',
                        pingfen: 100
                    }
                ],
                bio: '',
                username: '',
                score: 1,
                age: ''
            },
            mounted: function () {
                var that = this;
                api.addEventListener({ //监听安卓返回键
                    name: 'keyback'
                }, function (ret, err) {
                    api.closeWidget() //关闭应用
                });
                mui.plusReady(function () {
                })
            },

            methods: {
                upload: function () {
                },
                submit: function () {
                    var that = this;
                    if (that.img == '') {
                        api.toast({msg: '上传一个头像吧', location: 'middle'});
                        return
                    }
                    if (that.nickname == '') {
                        api.toast({msg: '请输入昵称', location: 'middle'});
                        return
                    }
                    if (that.age == '') {
                        api.toast({msg: '请输入年龄', location: 'middle'});
                        return
                    }
                    if (that.province == '') {
                        api.toast({msg: '请选择城市', location: 'middle'});
                        return
                    }
                    that.onRead()
                },
                // 实名提交验证
                submitsfz: function () {
                    var that = this;
                    if (that.imgc == '') {
                        api.toast({msg: '请上传侧面照', location: 'middle'});
                        return
                    }
                    if (that.username == '') {
                        api.toast({msg: '请输入姓名', location: 'middle'});
                        return
                    }
                    if (that.shenfenzheng == '') {
                        api.toast({msg: '请输入身份证号', location: 'middle'});
                        return
                    }
                    that.onRead()
                },
                submitfinsh: function () {
                    var that = this;
                    if (that.bio == '') {
                        api.toast({msg: '写一个约会目的吧', location: 'middle'});
                        return
                    }
                    // if (that.score == '') {
                    //     api.toast({msg: '给自己评个分吧', location: 'middle'});
                    //     return
                    // }
                    that.finish()
                },
                // 上传缩略图
                onRead: function () {
                    console.log("dddd");
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(token);

                    var img = ''
                    if (that.status == 0) {
                        img = that.img
                    } else {
                        img = that.imgc
                    }
                    console.log(img);
                    api.ajax({
                            url: ajaxRoute.avatarUpload,
                            method: 'post',
                            data: {
                                values: {
                                    token: token,
                                    imgData: img
                                }
                            }
                        }, function (res, err) {
                            if (res.code == 1) {
                                console.log(JSON.stringify(res));
                                that.img2 = res.msg
                                if (that.status == 0) {
                                    that.sub()
                                } else if (that.status == 1) {
                                    that.shiming()
                                }
                            } else {
                                api.hideProgress();
                                api.toast({msg: err.msg, location: 'middle'});
                            }
                        }
                    )
                },
                // 保存基本信息
                sub: function () {
                    console.log("999999");
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    console.log(that.age)
                    console.log("年龄");
                    console.log(token);

                    $common.request(ajaxRoute.baseinfo, {
                        data: {
                            values: {
                                token: token,
                                nickname: that.nickname,
                                gender: that.sex,
                                avatar: that.img2,
                                age: that.age,
                                city: that.city,
                                country: that.country
                            }
                        }
                    }, function (res, err) {
                        // api.hideProgress();
                        // alert(res)
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            api.hideProgress();
                            that.status = 1
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 实名认证
                shiming: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    $common.request(ajaxRoute.verify, {
                        data: {
                            values: {
                                token: token,
                                nickname: that.username,
                                shenfenzheng: that.shenfenzheng,
                                thumb: that.img2,
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            that.status = 2
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                // 完善资料结束
                finish: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    $common.request(ajaxRoute.finish, {
                        data: {
                            values: {
                                token: token,
                                bio: that.bio,
                                score: that.score
                            }
                        }
                    }, function (res, err) {
                        console.log(JSON.stringify(res));
                        if (res.code == 1) {
                            api.hideProgress();
                            api.sendEvent({
                                name: 'loginSuccess'
                            });
                            api.setPrefs({
                                key: 'isLogin',
                                value: 'true'
                            });
                            api.closeToWin({
                                name: 'root'
                            });
                            api.sendEvent({
                                name: 'isLogin',
                            });
                            api.closeFrame({
                                name: 'regs'
                            });
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    })
                },
                upimg: function () {
                    var that = this;
                    api.actionSheet({
                        title: '上传照片',
                        cancelTitle: '取消',
                        buttons: ['拍照', '手机相册']
                    }, function (ret, err) {
                        if (ret) {
                            that.getPicture(ret.buttonIndex);
                        }
                    });
                },
                getPicture: function (sourceType) {
                    //相机拍照
                    if (sourceType == 1) {
                        api.getPicture({
                            sourceType: 'camera',
                            encodingType: 'jpg',
                            mediaValue: 'pic',
                            allowEdit: false,
                            quality: 96,
                            saveToPhotoAlbum: false
                        }, function (ret, err) {
                            // 获取拍照图像并剪辑
                            if (ret) {
                                $api.byId('box').style.visibility = 'visible';
                                var FNImageClip = api.require('FNImageClip');
                                FNImageClip.open({
                                    rect: {
                                        x: 0,
                                        y: 0,
                                        w: api.winWidth,
                                        h: api.winHeight - document.querySelector('#box').offsetHeight
                                    },
                                    srcPath: ret.data,
                                    mode: 'image',
                                    style: {
                                        mask: 'rgba(0,0,0,0.75)',
                                        clip: {
                                            w: 200,
                                            h: 200,
                                            x: (api.frameWidth - 200) / 2,
                                            y: (api.frameHeight - 200) / 2,
                                            borderColor: '#0f0',
                                            borderWidth: 1,
                                            appearance: 'rectangle'
                                        }
                                    },
                                }, function (ret, err) {
                                });
                            }
                        });
                    } else if (sourceType == 2) {
                        //手机相册选图片
                        var obj = api.require('UIMediaScanner');
                        obj.open({
                            type: 'picture',
                            column: 4,
                            max: 1,
                            sort: {
                                key: 'time',
                                order: 'desc'
                            },
                            texts: {
                                stateText: '已选择*项',
                                cancelText: '取消',
                                finishText: '完成'
                            },
                            styles: {
                                bg: '#fff',
                                mark: {
                                    icon: '',
                                    position: 'bottom_right',
                                    size: 20
                                },
                                nav: {
                                    bg: '#eee',
                                    stateColor: '#000',
                                    stateSize: 18,
                                    cancleBg: 'rgba(0,0,0,0)',
                                    cancelColor: '#000',
                                    cancelSize: 18,
                                    finishBg: 'rgba(0,0,0,0)',
                                    finishColor: '#000',
                                    finishSize: 18
                                }
                            }
                        }, function (ret) {
                            //将选择的图像进行剪辑
                            if (ret.eventType == 'cancel') {
                            } else if (ret.list.length > 0) {
                                $api.byId('box').style.visibility = 'visible';
                                var FNImageClip = api.require('FNImageClip');
                                FNImageClip.open({
                                    rect: {
                                        x: 0,
                                        y: 0,
                                        w: api.winWidth,
                                        h: api.winHeight - document.querySelector('#box').offsetHeight
                                    },
                                    srcPath: ret.list[0].path,
                                    mode: 'image',
                                    style: {
                                        mask: 'rgba(0,0,0,0.75)',
                                        clip: {
                                            w: 200,
                                            h: 200,
                                            x: (api.frameWidth - 200) / 2,
                                            y: (api.frameHeight - 200) / 2,
                                            borderColor: '#0f0',
                                            borderWidth: 0,
                                            appearance: 'rectangle'
                                        }
                                    },
                                }, function (ret, err) {
                                });
                            }
                        });
                    }
                },
                nub: function (minNum, maxNum) {
                    switch (arguments.length) {
                        case 1:
                            return parseInt(Math.random() * minNum + 1);
                            break;
                        case 2:
                            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
                            break;
                        default:
                            return 0;
                            break;
                    }
                },
                //保存剪辑图像
                save: function () {
                    var that = this;
                    var FNImageClip = api.require('FNImageClip');
                    var nubs = that.nub(1000, 3000);
                    FNImageClip.save({
                        destPath: 'fs://tx_' + nubs + '.jpg',
                        copyToAlbum: false,
                        quality: 1
                    }, function (ret, err) {
                        $api.byId('box').style.visibility = 'hidden';
                        var tx = ret.destPath;
                        FNImageClip.close();
                        //上传剪辑后的图像到服务器
                        var trans = api.require('trans');
                        trans.decodeImgToBase64({
                            imgPath: ret.destPath
                        }, function (ret, err) {
                            if (ret.status) {
                                if (that.status == 0) {
                                    that.img = "data:image/png;base64," + ret.base64Str
                                } else {
                                    that.imgc = "data:image/png;base64," + ret.base64Str
                                }

                            } else {

                            }
                        });
                    });
                },

                getaddress: function () {
                    var that = this;
                    var picker = new mui.PopPicker({
                        //三级联动
                        layer: 3
                    });
                    picker.setData(cityData3);
                    var adressStr = '';
                    picker.pickers[0].setSelectedIndex(0);
                    picker.pickers[1].setSelectedIndex(0);
                    picker.pickers[2].setSelectedIndex(0);
                    picker.show(function (SelectedItem) {
                        //将选择的省、市、区显示到屏幕上
                        that.province = SelectedItem[0].text
                        that.city = SelectedItem[1].text
                        that.country = SelectedItem[2].text

                    });
                },
                getdate: function () {
                    var that = this;
                    api.openPicker({
                        type: 'date',
                        title: '选择时间'
                    }, function (ret, err) {
                        if (ret) {
                            // alert(JSON.stringify(ret));
                            that.birthday = ret.year + '-' + ret.month + '-' + ret.day
                            console.log(that.birthday);
                        } else {
                            console.log(JSON.stringify(err));
                        }
                    });
                },
                checksex: function (e) {
                    this.sex = e
                    // api.notification();
                    api.notification({
                        sound: 'default'
                    });
                },
                nextstep: function () {
                    if (this.status == 0) {
                        this.submit()
                    } else if (this.status == 1) {
                        this.submitsfz()
                    } else {
                        this.submitfinsh()
                    }
                },
                checkscore: function (e) {
                    this.score = e
                }
            },
            filters: {}
        })
    }
</script>

</html>
